<template>
  <div class="TabsBox">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="创意思维" name="1">
        <el-image v-for="(url, index) in urls" :key="'1' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
        <h4 class="contentTitle">最热下载</h4>
        <el-image v-for="(url, index) in urls" :key="'2' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
        <h4 class="contentTitle">最受欢迎</h4>
        <el-image v-for="(url, index) in urls" :key="'3' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
      </el-tab-pane>
      <el-tab-pane label="大牌精选" name="2">
        <el-image v-for="(url, index) in urls" :key="'4' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
        <h4 class="contentTitle">最热下载</h4>
        <el-image v-for="(url, index) in urls" :key="'5' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
        <h4 class="contentTitle">最受欢迎</h4>
        <el-image v-for="(url, index) in urls" :key="'6' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
      </el-tab-pane>
      <el-tab-pane label="全球聚合" name="3">
        <el-image v-for="(url, index) in urls" :key="'7' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
        <h4 class="contentTitle">最热下载</h4>
        <el-image v-for="(url, index) in urls" :key="'8' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
        <h4 class="contentTitle">最受欢迎</h4>
        <el-image v-for="(url, index) in urls" :key="'9' + index" :src="url"></el-image>
        <div class="more"><router-link to=''>更多</router-link></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'TabsBox',
  props: {
    // msg: String
  },
  data() {
    return {
      activeName: '1',
      urls: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
      ]
    };
  },
  methods: {
    handleClick() {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.TabsBox {
  padding: 72px 0 100px;
}
.TabsBox >>> .el-image{
  width: 18%;
  height: auto;
  margin: 1%;
}
.TabsBox >>> .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
}
.TabsBox >>> .el-tabs__nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.TabsBox >>> .el-tabs__item {
  font-size: 30px;
  height: 70px;
  line-height: 70px;
  color: #7a7878;
  padding: 0 50px;
}
.TabsBox >>> .el-tabs__item.is-active {
  color: #333333
}
.TabsBox >>> .el-tabs__active-bar{
  background-color: #151515;
}
.TabsBox >>> .el-tabs__nav-wrap::after {
  height: 0px;
}
.TabsBox >>> .el-tab-pane{
  padding: 0 100px;
}

.contentTitle {
  margin-left: 1%;
  font-size: 26px;
  line-height: 28px;
  height: 28px;
  padding-left: 10px;
  border-left: 3px solid #040404; 
  font-weight: normal;
  margin-bottom: 1%;
}
.more {
  text-align: right;
  padding: 0 1%;
  font-size: 20px;
}
</style>
